<template>
  <el-container>
    <el-header>
      <!-- 网站图标 -->
      <div class="logo">
        <img src="../../assets/imgs/tx.png"
             alt="">
      </div>
      <h1>科泰新冠物资管理系统</h1>
      <!-- 退出等功能 -->
      <div class="tools">

        <el-dropdown trigger="click"
                     @command="handleCommand">
          <span class="el-dropdown-link">
            <img src="../../assets/imgs/tx.png"
                 alt="">
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-s-tools"
                              command="setting">设置</el-dropdown-item>
            <el-dropdown-item icon="el-icon-s-home"
                              command="home">首页</el-dropdown-item>
            <el-dropdown-item icon="el-icon-error"
                              command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse?'66px':'200px'">
        <div class="doCollapse"
             @click="hesCollapse">
          |||
        </div>
        <el-menu :collapse="isCollapse"
                 :router="true"
                 :collapse-transition="false"
                 unique-opened
                 @open="handleOpen"
                 @close="handleClose"
                 background-color="#272c33"
                 text-color="#fff"
                 active-text-color="#ffd04b">
          <Menu :menuData="menuData"></Menu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import Menu from '../../components/Menu/index.vue'
import { getMenuTree } from '../../api/menu'
import { mapMutations } from 'vuex'
import { USERLOGIN, USERLOGOUT } from '../../store/types'
export default {
  data () {
    return {
      isCollapse: false,
      menuData: []

    }
  },
  components: {
    Menu,
  },
  methods: {
    ...mapMutations([USERLOGIN, USERLOGOUT]),
    // 获取菜单
    async getMenus () {
      let result = await getMenuTree();
      this.menuData = result.tree;
      console.log(result);
    }
    ,
    hesCollapse () {
      this.isCollapse = !this.isCollapse;
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    handleCommand (command) {
      if (command === 'logout') {
        //退出登录，并且清楚vuex和sessionStorage中的内容
        this[USERLOGOUT]()
        this.$router.push('/')
      }
    }
  },
  created () {
    this.getMenus();
  }

}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
}

.el-header {
  background-color: #272c33;
  display: flex;
  justify-content: space-between;
  .logo,
  .tools {
    height: 100%;
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  h1 {
    margin-left: 12px;
    color: white;
  }
}
.el-footer {
  background-color: #272c33;
  color: #fff;
  text-align: center;
  line-height: 160px;
}

.el-aside {
  background-color: #d3dce6;
  line-height: 200px;

  .doCollapse {
    height: 40px;
    color: #000;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
  }
}
.el-aside {
  background-color: #272c33;
}
.el-main {
  background-color: #eaedf1;
}

.el-main {
  background-color: #e9eef3;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>